<template>
  <div class="group bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-xl">
    <div class="relative h-56 overflow-hidden">
      <img 
        :src="city.image" 
        alt="城市图片" 
        class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
      >
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
      <div class="absolute bottom-0 left-0 right-0 p-4">
        <div class="flex justify-between items-end">
          <div>
            <h3 class="text-xl font-bold text-white text-shadow">{{ city.name }}</h3>
            <p class="text-white/80 text-sm flex items-center">
              <i class="fa fa-map-marker mr-1"></i> {{ city.country }}
            </p>
          </div>
          <button
            @click="toggleFavorite"
            class="bg-white/20 backdrop-blur-sm hover:bg-white/30 text-white p-2 rounded-full transition-colors"
          >
            <i class="fa fa-heart" :class="{ 'text-red-500': isFavorite }"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="p-5">
      <div class="flex items-center mb-3">
        <div class="flex items-center text-yellow-400 mr-2">
          <i class="fa fa-star"></i>
          <span class="ml-1 text-gray-700 font-medium">{{ city.rating }}</span>
        </div>
        <span class="text-gray-500 text-sm">基于 {{ city.testimonials.length }} 条评价</span>
      </div>
      <p class="text-gray-600 mb-4 line-clamp-2">{{ city.description }}</p>
      <div class="flex justify-between items-center">
        <span class="text-sm text-gray-500">
          <i class="fa fa-map-o mr-1"></i> {{ city.attractions.length }} 个景点
        </span>
        <router-link 
          to={`/city/${city.id}`} 
          class="text-primary hover:text-primary/80 font-medium flex items-center"
        >
          查看详情 <i class="fa fa-arrow-right ml-1"></i>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  props: {
    city: {
      type: Object,
      required: true
    }
  },
  emits: ['toggle-favorite'],
  
  setup(props, { emit }) {
    const store = useStore();
    
    // 检查是否已收藏
    const isFavorite = computed(() => store.getters.isCityFavorite(props.city.id));
    
    // 切换收藏状态
    const toggleFavorite = () => {
      emit('toggle-favorite', props.city.id);
    };
    
    return {
      isFavorite,
      toggleFavorite
    };
  }
};
</script>

<style scoped>
.city-card {
  transition: all 0.3s ease;
}

.city-card:hover {
  transform: translateY(-5px);
}
</style>
